<template>
  <div
    class="app-container safe-area-inset-bottom">
    <NavBar v-if="showNavBar" safe-area-inset-top
      :title="(currentRouteTitle as string)"
      :left-arrow="(showBackButton as boolean)"
      @click-left="handleBack" />

    <main
      :class="['main-content', { 'expend-main': showFooter }]">
      <RouterView
        v-if="!loading && platformCardTpye" />
      <div v-if="loading">
        <SkeletonCategory />
        <SkeletonCard />
      </div>
      <Empty v-if="!platformCardTpye && !loading"
        description="当前网络异常，请检查网络连接" />
    </main>

    <Tabbar v-model="activeTab" v-if="showFooter"
      route>
      <TabbarItem v-for="tab in tabs"
        :key="tab.path" :to="tab.path"
        :icon="tab.icon">
        {{ tab.title }}
      </TabbarItem>
    </Tabbar>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {
  Empty,
  NavBar, Tabbar, TabbarItem,
} from 'vant';
import {
  computed, onMounted, ref,
} from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';

import useAuthStore from '@/stores/auth.store';
import usePlatformStore from '@/stores/platform.store';

import SkeletonCard from './SkeletonCard.vue';
import SkeletonCategory from './SkeletonCategory.vue';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const { roles, permissions } = storeToRefs(authStore);

const platformStore = usePlatformStore();
const { platformCardTpye, loading } = storeToRefs(platformStore);

const handleInit = async () => {
  await platformStore.fetchDefaultPlatform();
};

onMounted(async () => {
  await handleInit();
});

// 底部导航配置
const tabs = computed(() => [
  {
    path: '/home',
    title: '首页',
    icon: 'home-o',
  },
  {
    path: '/recovery',
    title: '卖卡',
    icon: 'balance-pay',
  },
  {
    path: '/admin',
    title: '管理员',
    icon: 'orders-o',
    roles: ['admin'],
  },
  {
    path: '/profile',
    title: '我的',
    icon: 'user-o',
  },
].filter((i: any) => {
  if (!i.roles && !i.permissions) {
    return true;
  }
  if (i.roles) {
    return i.roles.some((role: string) => roles.value.includes(role));
  }
  if (i.permissions) {
    return i.permissions.some((permission: string) => permissions.value.includes(permission));
  }
  return false;
}));

// 响应式状态
const activeTab = ref(0);

// 计算属性
const showNavBar = computed(() => !route.meta.hideNavBar);
const showBackButton = computed(() => route.meta.requiresBack);
const currentRouteTitle = computed(() => route.meta.title || '卡券回收平台');
const showFooter = computed(() => !route.meta.hideFooter);

// 监听路由变化
router.afterEach((to) => {
  // 更新底部导航激活状态
  const index = tabs.value.findIndex((tab) => tab.path === to.path);
  activeTab.value = index >= 0 ? index : 0;
  document.title = (to.meta.title as string) || '卡券回收平台';
});

const prevRoute = computed(
  () => router.options.history.state.back || { name: 'Profile' },
);

const handleBack = () => router.push(prevRoute.value as any);
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 750px;
  margin: 0 auto;

  .main-content {
    height: 100%;
    background-color: var(--van-background-2);
    flex-grow: 1;
    // -webkit-overflow-scrolling: touch;
  }
}

.van-nav-bar {
  position: sticky;
  top: 0;
  z-index: 99;
}

.van-tabbar {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

.expend-main {
  margin-bottom: var(--van-tabbar-height);
}
</style>
